<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>性教育内容</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#34D399',
                        secondary: '#06B6D4',
                        accent: '#F59E0B',
                        danger: '#EF4444',
                        success: '#10B981',
                        background: '#F8FAFC',
                        surface: '#FFFFFF',
                        'sexual-health': '#EC4899'
                    }
                }
            }
        }
    </script>
</head>
<body class="bg-background">
    <!-- Status Bar -->
    <div class="flex justify-between items-center px-4 py-2 text-xs text-gray-800">
        <span class="font-medium">9:41</span>
        <div class="flex items-center space-x-1">
            <i class="fas fa-signal text-xs"></i>
            <i class="fas fa-wifi text-xs"></i>
            <div class="w-6 h-3 border border-gray-800 rounded-sm">
                <div class="w-4 h-1.5 bg-green-500 rounded-sm mt-0.5 ml-0.5"></div>
            </div>
        </div>
    </div>

    <!-- Header -->
    <div class="bg-surface px-6 pt-4 pb-4 border-b border-gray-100">
        <div class="flex items-center justify-between mb-4">
            <h1 class="text-2xl font-bold text-gray-800">性教育内容</h1>
            <button class="p-2 bg-gray-100 rounded-full">
                <i class="fas fa-search text-gray-600"></i>
            </button>
        </div>

        <!-- Category Tabs -->
        <div class="flex space-x-2 overflow-x-auto">
            <button class="flex-shrink-0 px-4 py-2 bg-primary text-white rounded-full text-sm font-medium">推荐</button>
            <button class="flex-shrink-0 px-4 py-2 bg-gray-100 text-gray-600 rounded-full text-sm font-medium">生理健康</button>
            <button class="flex-shrink-0 px-4 py-2 bg-gray-100 text-gray-600 rounded-full text-sm font-medium">心理健康</button>
            <button class="flex-shrink-0 px-4 py-2 bg-gray-100 text-gray-600 rounded-full text-sm font-medium">关系沟通</button>
        </div>
    </div>

    <!-- Main Content -->
    <div class="px-6 py-6 pb-20">
        <!-- Featured Course -->
        <div class="bg-gradient-to-r from-sexual-health/10 to-pink-50 rounded-2xl p-6 mb-6 border border-sexual-health/20">
            <div class="flex items-start space-x-4">
                <!-- Image from Unsplash: Couple/Relationship concept -->
                <img src="https://images.unsplash.com/photo-1516589178581-6cd7833ae3b2?w=80&h=80&fit=crop&auto=format&q=80" 
                     alt="Relationship" 
                     class="w-20 h-20 object-cover rounded-xl">
                <!-- Source: https://unsplash.com/photo-1516589178581-6cd7833ae3b2 -->
                <div class="flex-1">
                    <span class="px-2 py-1 bg-sexual-health/20 text-sexual-health text-xs rounded-full">精品课程</span>
                    <h3 class="font-bold text-gray-800 mt-2 mb-1">健康性观念建立</h3>
                    <p class="text-sm text-gray-600 mb-3">科学认识性健康，建立正确的性观念</p>
                    <button class="bg-sexual-health text-white px-4 py-2 rounded-xl text-sm font-medium">
                        开始学习
                    </button>
                </div>
            </div>
        </div>

        <!-- Learning Progress -->
        <div class="bg-surface rounded-2xl p-6 mb-6 shadow-sm">
            <h3 class="text-lg font-semibold text-gray-800 mb-4">学习进度</h3>
            
            <div class="space-y-4">
                <div>
                    <div class="flex justify-between items-center mb-2">
                        <span class="font-medium text-gray-800">本周学习时长</span>
                        <span class="text-primary font-semibold">2.5小时</span>
                    </div>
                    <div class="w-full bg-gray-200 rounded-full h-2">
                        <div class="bg-primary h-2 rounded-full" style="width: 50%"></div>
                    </div>
                    <p class="text-xs text-gray-600 mt-1">目标: 5小时/周</p>
                </div>
                
                <div class="grid grid-cols-3 gap-4 text-center pt-4 border-t border-gray-100">
                    <div>
                        <div class="text-xl font-bold text-green-600">8</div>
                        <div class="text-xs text-gray-600">文章已读</div>
                    </div>
                    <div>
                        <div class="text-xl font-bold text-blue-600">3</div>
                        <div class="text-xs text-gray-600">视频已看</div>
                    </div>
                    <div>
                        <div class="text-xl font-bold text-purple-600">5</div>
                        <div class="text-xs text-gray-600">音频已听</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Articles Section -->
        <div class="mb-6">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-semibold text-gray-800">热门文章</h3>
                <button class="text-primary text-sm font-medium">查看更多</button>
            </div>
            
            <div class="space-y-4">
                <div class="bg-surface rounded-2xl p-4 shadow-sm">
                    <div class="flex space-x-4">
                        <!-- Image from Unsplash: Health/Wellness concept -->
                        <img src="https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?w=80&h=60&fit=crop&auto=format&q=80" 
                             alt="Health" 
                             class="w-20 h-15 object-cover rounded-xl">
                        <!-- Source: https://unsplash.com/photo-1571019613454-1cb2f99b2d8b -->
                        <div class="flex-1">
                            <h4 class="font-semibold text-gray-800 mb-1">性健康基础知识</h4>
                            <p class="text-sm text-gray-600 mb-2">了解性健康的基本概念和重要性...</p>
                            <div class="flex items-center space-x-4 text-xs text-gray-500">
                                <span><i class="fas fa-clock mr-1"></i>10分钟</span>
                                <span><i class="fas fa-heart mr-1"></i>156</span>
                                <span><i class="fas fa-eye mr-1"></i>892</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="bg-surface rounded-2xl p-4 shadow-sm">
                    <div class="flex space-x-4">
                        <!-- Image from Unsplash: Communication concept -->
                        <img src="https://images.unsplash.com/photo-1551836022-d5d88e9218df?w=80&h=60&fit=crop&auto=format&q=80" 
                             alt="Communication" 
                             class="w-20 h-15 object-cover rounded-xl">
                        <!-- Source: https://unsplash.com/photo-1551836022-d5d88e9218df -->
                        <div class="flex-1">
                            <h4 class="font-semibold text-gray-800 mb-1">伴侣间性沟通技巧</h4>
                            <p class="text-sm text-gray-600 mb-2">学会与伴侣进行健康的性话题沟通...</p>
                            <div class="flex items-center space-x-4 text-xs text-gray-500">
                                <span><i class="fas fa-clock mr-1"></i>15分钟</span>
                                <span><i class="fas fa-heart mr-1"></i>203</span>
                                <span><i class="fas fa-eye mr-1"></i>1.1k</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Videos Section -->
        <div class="mb-6">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-semibold text-gray-800">推荐视频</h3>
                <button class="text-primary text-sm font-medium">查看更多</button>
            </div>
            
            <div class="space-y-4">
                <div class="bg-surface rounded-2xl p-4 shadow-sm">
                    <div class="relative mb-3">
                        <!-- Image from Unsplash: Wellness/Health concept -->
                        <img src="https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?w=300&h=160&fit=crop&auto=format&q=80" 
                             alt="Wellness" 
                             class="w-full h-40 object-cover rounded-xl">
                        <!-- Source: https://unsplash.com/photo-1576091160399-112ba8d25d1f -->
                        <div class="absolute inset-0 bg-black/20 rounded-xl flex items-center justify-center">
                            <div class="w-12 h-12 bg-white/90 rounded-full flex items-center justify-center">
                                <i class="fas fa-play text-gray-800 ml-1"></i>
                            </div>
                        </div>
                        <div class="absolute bottom-2 right-2 bg-black/70 text-white px-2 py-1 rounded text-xs">
                            18:45
                        </div>
                    </div>
                    <h4 class="font-semibold text-gray-800 mb-1">性健康专家讲座</h4>
                    <p class="text-sm text-gray-600 mb-2">专业医生讲解性健康的重要性和维护方法</p>
                    <div class="flex items-center space-x-4 text-xs text-gray-500">
                        <span><i class="fas fa-play mr-1"></i>2.8k</span>
                        <span><i class="fas fa-thumbs-up mr-1"></i>145</span>
                        <span><i class="fas fa-comment mr-1"></i>32</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Audio Section -->
        <div>
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-semibold text-gray-800">音频内容</h3>
                <button class="text-primary text-sm font-medium">查看更多</button>
            </div>
            
            <div class="bg-surface rounded-2xl p-4 shadow-sm">
                <div class="flex items-center space-x-4">
                    <div class="w-16 h-16 bg-gradient-to-br from-sexual-health to-pink-500 rounded-xl flex items-center justify-center">
                        <i class="fas fa-headphones text-white text-xl"></i>
                    </div>
                    <div class="flex-1">
                        <h4 class="font-semibold text-gray-800 mb-1">性健康冥想指导</h4>
                        <p class="text-sm text-gray-600 mb-2">通过冥想提升性健康意识和自我认知</p>
                        <div class="flex items-center space-x-4 text-xs text-gray-500">
                            <span><i class="fas fa-clock mr-1"></i>25分钟</span>
                            <span><i class="fas fa-download mr-1"></i>已下载</span>
                        </div>
                    </div>
                    <button class="p-3 bg-sexual-health/10 rounded-full">
                        <i class="fas fa-play text-sexual-health"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Bottom Navigation -->
    <div class="fixed bottom-0 left-0 right-0 bg-surface border-t border-gray-100 px-6 py-3">
        <div class="flex justify-around items-center">
            <button class="flex flex-col items-center space-y-1">
                <i class="fas fa-home text-gray-400 text-lg"></i>
                <span class="text-xs text-gray-400">主页</span>
            </button>
            <button class="flex flex-col items-center space-y-1">
                <i class="fas fa-heart text-gray-400 text-lg"></i>
                <span class="text-xs text-gray-400">性健康</span>
            </button>
            <button class="flex flex-col items-center space-y-1">
                <i class="fas fa-users text-gray-400 text-lg"></i>
                <span class="text-xs text-gray-400">伴侣</span>
            </button>
            <button class="flex flex-col items-center space-y-1">
                <i class="fas fa-book text-primary text-lg"></i>
                <span class="text-xs text-primary font-medium">学习</span>
            </button>
            <button class="flex flex-col items-center space-y-1">
                <i class="fas fa-user text-gray-400 text-lg"></i>
                <span class="text-xs text-gray-400">我的</span>
            </button>
        </div>
    </div>
</body>
</html> 